<!DOCTYPE html>
<html lang="en">
<!--
一、	要求实现以下功能：
1.	当鼠标移入时，该行的颜色为红色；
2.	当鼠标移出时，该行的颜色还原；
3.	当添加按钮“添加一行数据”时，文本框中的数据添加到表格中且文本框置空；（效果见图10-2）
4.	当点击表格中的“删除”时，该行数据被删除。
-->
<!--
1.2． 操作步骤描述
1.	实现script脚本中的hightlight方法实现隔行换色效果（鼠标移入时为红色，移出为黄色）；
2.	为按钮“添加一行数据”绑定点击事件，并编写方法实现效果；
3.	为“删除”超链接绑定点击事件，并编写方法实现效果。
-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: auto;
            width:520px;
        }
        #stu{
            margin: auto;
            width: 520px;
            border-collapse: collapse;/*两边边框合并成一条*/
        }
        th{
            background-color: cornflowerblue;
        }
        tr:hover{
            background-color: crimson;
        }
    </style>
</head>
<body>
<script>
    function delrow(obj) {
        /*confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。*/
        if(confirm("确定要删除吗？")){
            let tr = obj.parentNode.parentNode;
            tr.remove();
        }
    }
    function addstudent() {
  //1.得到文本框的值
        let no = document.getElementById("no").value;
        let name = document.getElementById("name").value;
    //2. 创建文本节点
        let txtNo = document.createTextNode(no);
        //3. 创建td
        let td1= document.createElement("td");
        td1.appendChild(txtNo);

        //创建第2个td
        let td2 = document.createElement("td");
        td2.innerHTML = name;

        //创建第3个td
        let td3 = document.createElement("td");
        td3.innerHTML = "<a href=\"javascript:void(0)\" onclick=\"delrow(this)\">删除</a>";

        //4. 创建tr
        let tr = document.createElement("tr");
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        //5. 把tr追加成tbody的子元素
        let tbody = document.getElementById("data");
        tbody.appendChild(tr);
        //清空元素
        document.getElementById("no").value = "";
        document.getElementById("name").value = "";
    }
</script>
<div>
    <table id="stu" border="1px"  cellpadding="3" cellspacing="0">
        <tbody id="data">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>itcast001</td>
                <td>zhangsan</td>
                <td>
                    <a href="javascript:void(0)" onclick="delrow(this)">删除</a>
                </td>
            </tr>
            <tr>
                <td>itcast002</td>
                <td>lisi</td>
                <td>
                    <a href="javascript:void(0)" onclick="delrow(this)">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
    <br/>
    学号：<input type="text" id="no" value=""/>
    姓名：<input type="text" id="name" value=""/>
    <input type="button" id="addBtn" value="添加" onclick="addstudent()"/>
</div>
</body>
</html>